import { Component } from "react";

class Main extends Component {
    render() {
        const { showList, del, changeDone, AllDone, changeAllDone, changeIsEdit, edit } = this.props
        return (
            <section className="main">
                <input id="toggle-all" className="toggle-all" type="checkbox" checked={AllDone} onChange={(e)=>changeAllDone(e)}/>
                <label htmlFor="toggle-all">Mark all as complete</label>
                <ul className="todo-list">
                    {/* <li className="completed">
                        <div className="view">
                            <input className="toggle" type="checkbox" />
                            <label>Taste JavaScript</label>
                            <button className="destroy"></button>
                        </div>
                        <input className="edit" type={"text"} style={{ display: "none" }} />
                    </li> */}
                    {
                        showList.map((item, index) => {
                            return (
                                <li className={item.done ? "completed" : ''} key={item.id}>
                                    <div className="view" style={{ display: item.isEdit ? 'none' : 'block' }}>
                                        <input className="toggle" type="checkbox" checked={item.done} onChange={()=>changeDone(item.id)}/>
                                        <label onDoubleClick={()=>{changeIsEdit(item.id)}}>{item.title}</label>
                                        <button className="destroy" onClick={()=>del(item.id)}></button>
                                    </div>
                                    <input className="edit" type={"text"} style={{ display: item.isEdit ? 'block' : 'none' }} defaultValue={item.title} onBlur={(e)=>{edit(item.id,e.target.value)}}/>
                                </li>
                            )
                        })
                    }
                </ul>
            </section>
        )
    }
}

export default Main